<!DOCTYPE html>
<html lang="en">

<head>
    <title>电子竞技</title>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <link href="../../css/public.css" rel="stylesheet">
    <style type="text/css">
        .eSports_room{
            overflow:hidden;
            line-height: 1;font-size: 0.39rem;
            color: #BFC1F2;
        }
        .home_zhangdui_nav {
            /*padding-left: 15%;*/
            overflow: hidden;
            background: #021349 url('../../images/reg/back.png') 10px center no-repeat;
            background-size: .7rem;
        }
        .info{
            display: flex;
            align-items: center;
            justify-content: space-around;
            width: 100%;
            height: 3.61rem;
            margin-top: 50px;
        }
        .info .info-left{
            text-align: center;
        }
        .info .info-left .top .let-num{
            height: 0.33rem;
            margin-top: 0.11rem;
            font-size: 0.33rem;
        }
        .info .info-left .num{
            margin-top: 0.28rem;
            font-size: 0.83rem;
            color: #FFCD29;
        }
        .info .info-mid{text-align: center;}
        .info .info-mid img{
            width: 0.83rem;
            height: 1.11rem;
        }
        .info .info-mid .kill-txt{
            margin: 0.19rem 0 0.14rem;
            font-size: 0.28rem;
        }
        .info .info-mid .kill-num{
            padding: 0.08rem 0.36rem;
            font-size: 0.33rem;
            color: #fff;
            text-align: center;
            background: #1F1F77;
            border-radius: 100px;
        }
        .fight-list{margin: 0.56rem 0.36rem;}
        .fight-list .fight-item{
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0.44rem;
            padding: 0 0.44rem;
            height: 1.81rem;
            width: 100%;
            box-sizing: border-box;
            background: url("../../images/eSports/bg_room_fightdetails@2x.png");
                background-size: 100% 100%;
        }
        .fight-list .fight-item .left{
            width: 1.11rem;
            white-space: nowrap;
            overflow: hidden;
            color: #FFCD29
        }
        .fight-list .fight-item .mid{
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .fight-list .fight-item .mid .fight-name{
            width: 2.5rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 0.44rem;
        }
        .fight-list .fight-item .mid .fight-name.A{text-align: right;}
        .fight-list .fight-item .mid img{
            width: 0.58rem;
            height: 0.78rem;
            margin: 0.28rem;
        }
        .fight-list .fight-item .right{
            width: 1.3rem;
            font-size: 0.31rem;
            color: #6A72A4;
        }
        .fight-list .fight-item .right.on{
            color: #FFCD29;
        }
        .fight-list .fight-item .over-flag{
            position: absolute;
            top: 0.36rem;
            left: 2.5rem;
            width: 1.11rem;
            height: 1.11rem;
        }
        .fight-list .fight-item .over-flag.B{
            left: 5.2rem;
        }
    </style>
</head>

<body>
    <div class="eSports_room">
        <div class="home_zhangdui_nav">
            <span class="goBack"></span>对战详情
        </div>
        <div class="info">
           <!--  <div class="info-left">
               <div class="top">
                   <p class="name">AG超厉害</p>
               </div>
               <div class="num">2</div>
           </div>
           <div class="info-mid">
               <img src="../../images/eSports/icon_room_vs@2x.png">
               <p class="kill-txt">击杀人数比</p>
               <div class="kill-num">300 - 20</div>
           </div>
           <div class="info-left info-right">
                <div class="top">
                   <p class="name">AG超厉害</p>
                   <p class="let-num">(-2场)</p>
               </div>
               <div class="num">0</div>
           </div> -->
        </div>
        <ul class="fight-list">
           <!--  <li class="fight-item">
               <div class="left">B01</div>
               <div class="mid">
                   <p class="fight-name A">AG超厉害</p>
                   <img src="../../images/eSports/icon_room_vs@2x.png">
                   <p class="fight-name B">霹雳烽火狼霹雳烽火狼</p>
               </div>
               <div class="right">已结束</div>
               <img src="../../images/eSports/DZXQ_image_victory@2x.png" class="over-flag">
           </li> -->
        </ul>
    </div>

    <script src="../../js/jquery-3.2.1.min.js"></script>
    <script src="../../js/public.js"></script>
    <script>
        $(function(){
            let info = $('.info'), fightList = $('.fight-list');

            $.ajax({
                url: eSportsRoomInfo,
                type: 'get',
                data: {fdId: '997029298500145152'},
                success: (data, status)=>{

                    let infoChild = `<div class="info-left">
                        <div class="top">
                            <p class="name">${data.roomInfo.fdClanAName}</p>
                            <p class="let-num">${data.letClan == '-1'? `(-${data.letNum}场)` : ''}</p>
                        </div>
                        <div class="num">${data.winANumbers}</div>
                    </div>
                    <div class="info-mid">
                        <img src="../../images/eSports/icon_room_vs@2x.png">
                        <p class="kill-txt">击杀人数比</p>
                        <div class="kill-num">${data.totalAKillNumbers} - ${data.totalBKillNumbers}</div>
                    </div>
                    <div class="info-left info-right">
                         <div class="top">
                            <p class="name">${data.roomInfo.fdClanBName}</p>
                            <p class="let-num">${data.letClan == '1'? `(-${data.letNum}场)` : ''}</p>
                        </div>
                        <div class="num">${data.winBNumbers}</div>
                    </div>`;
                    if(data.sessionInfos.length){
                        data.sessionInfos.forEach(function(item, idx){
                            let fightItem = ` <li class="fight-item" data-fdid=${item.sessionInfo.fdId} data-roomid=${item.sessionInfo.fdRoomId}>
                                <div class="left">${item.sessionInfo.fdRoomName}</div>
                                <div class="mid">
                                    <p class="fight-name A">${data.roomInfo.fdClanAName}</p>
                                    <img src="../../images/eSports/icon_room_vs@2x.png">
                                    <p class="fight-name B">${data.roomInfo.fdClanBName}</p>
                                </div>
                                <div class="right">${item.sessionInfo.fdSingleResult == '-2' ? '未开始': item.sessionInfo.fdSingleResult == '0' ? '进行中': '已结束'}</div>
                                ${item.sessionInfo.fdSingleResult == '-1' ? '<img src="../../images/eSports/DZXQ_image_victory@2x.png" class="over-flag">': item.sessionInfo.fdSingleResult == '1' ? '<img src="../../images/eSports/DZXQ_image_victory@2x.png" class="over-flag B">': ''}
                            </li>`;
                            fightList.append(fightItem);
                        })
                    }
                    info.append(infoChild)
                },
                fail: (err, status)=>{
                    alert('请求失败')
                    console.log(err)
                },
            })

            $(document).on('click', '.fight-item', function(event) {
                event.stopPropagation();
                let fdId = event.currentTarget.dataset.fdid;
                let roomId = event.currentTarget.dataset.roomid;
                $.ajax({
                    url: eSportsSessionInfo,
                    type: 'get',
                    data: {id: fdId},
                    success: (data, status)=>{
                        let result = data.result;
                        if(result.code == '0'){
                            window.location.href=`../home/chat.html?roomId=${fdId}`;
                        }else{
                            alert(result.msg)
                        }
                    },
                    fail: (err, status)=>{},
                })

            });
        })
    </script>
</body>

</html>